import React from 'react';
import { Card, Avatar, Descriptions, Tag, Button, Space } from 'antd';
import { UserOutlined, EditOutlined } from '@ant-design/icons';
import { useAuth } from '../contexts/AuthContext';
import { useTheme } from '../contexts/ThemeContext';

const Profile: React.FC = () => {
  const { user, logout } = useAuth();
  const { theme } = useTheme();

  if (!user) {
    return (
      <div className="p-8">
        <Card>
          <div className="text-center">
            <p>用户信息加载中...</p>
          </div>
        </Card>
      </div>
    );
  }

  const getGenderText = (gender: string) => {
    switch (gender) {
      case 'male': return '男';
      case 'female': return '女';
      case 'other': return '其他';
      default: return gender;
    }
  };

  const getGenderColor = (gender: string) => {
    switch (gender) {
      case 'male': return 'blue';
      case 'female': return 'pink';
      case 'other': return 'purple';
      default: return 'default';
    }
  };

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800 dark:text-white">个人资料</h1>
        <p className="text-gray-600 dark:text-gray-300 mt-2">查看和管理您的个人信息</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 用户头像卡片 */}
        <Card className="lg:col-span-1">
          <div className="text-center">
            <Avatar 
              size={120} 
              src={user.avatar} 
              icon={<UserOutlined />}
              className="mb-4"
              style={{ backgroundColor: theme.colors.primary[500] }}
            />
            <h2 className="text-xl font-semibold mb-2">{user.name}</h2>
            <p className="text-gray-500 mb-4">@{user.username}</p>
            
            <Space direction="vertical" className="w-full">
              <Button 
                type="primary" 
                icon={<EditOutlined />} 
                block
                style={{ backgroundColor: theme.colors.primary[500] }}
              >
                编辑资料
              </Button>
              <Button 
                danger 
                block
                onClick={logout}
              >
                退出登录
              </Button>
            </Space>
          </div>
        </Card>

        {/* 详细信息卡片 */}
        <Card title="基本信息" className="lg:col-span-2">
          <Descriptions column={1} bordered>
            <Descriptions.Item label="用户ID">
              {user.id}
            </Descriptions.Item>
            <Descriptions.Item label="用户名">
              {user.username}
            </Descriptions.Item>
            <Descriptions.Item label="姓名">
              {user.name}
            </Descriptions.Item>
            <Descriptions.Item label="性别">
              <Tag color={getGenderColor(user.gender)}>
                {getGenderText(user.gender)}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              {user.phone}
            </Descriptions.Item>
            <Descriptions.Item label="邮箱">
              {user.email}
            </Descriptions.Item>
            <Descriptions.Item label="注册时间">
              {new Date(user.createdAt).toLocaleString('zh-CN')}
            </Descriptions.Item>
            <Descriptions.Item label="角色">
              <Space>
                {user.roles?.map(role => (
                  <Tag key={role} color="blue">{role}</Tag>
                ))}
              </Space>
            </Descriptions.Item>
            <Descriptions.Item label="权限">
              <Space wrap>
                {user.permissions?.map(permission => (
                  <Tag key={permission} color="green">{permission}</Tag>
                ))}
              </Space>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </div>

      {/* 统计信息 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <Card>
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-500 mb-2">0</div>
            <div className="text-gray-600">登录次数</div>
          </div>
        </Card>
        <Card>
          <div className="text-center">
            <div className="text-2xl font-bold text-green-500 mb-2">0</div>
            <div className="text-gray-600">数据记录</div>
          </div>
        </Card>
        <Card>
          <div className="text-center">
            <div className="text-2xl font-bold text-purple-500 mb-2">
              {Math.floor((Date.now() - new Date(user.createdAt).getTime()) / (1000 * 60 * 60 * 24))}
            </div>
            <div className="text-gray-600">注册天数</div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Profile;